<template>
  <div class="card-management-container">
    <div class="page-header">
      <h2>挂失</h2>
    </div>

    <!-- 卡片状态显示 -->
    <div class="card-status-section">
      <div class="{}" :class="this.getState() === '已挂失' ? 'status-card-false' : 'status-card-true'" >
        <div class="status-header">
          <h3>卡片状态</h3>
          <div class="status-badge">
            {{this.getState()}}
          </div>
        </div>
        <div class="card-number">{{ this.formData.cardID ? this.formData.cardID : '未选择银行卡' }}</div>
      </div>
    </div>

    <div class="management-layout">
      <!-- Form Column -->
      <div class="form-column">
        <div class="management-card">
          <h3 class="card-title">挂失操作</h3>
          
          <div class="form-group">
            <label for="cardSelect">选择银行卡</label>
            <select id="cardSelect" v-model="this.formData.cardID" required>
              <option disabled value="">请选择要操作的银行卡</option>
              <option v-for="card in userCards" :key="card.cardID" :value="card.cardID">
                {{ card.cardID }}
              </option>
            </select>
          </div>
          
          <div>
            <div class="form-group">
              <label for="cardPassword">银行卡密码</label>
              <div class="password-input">
                <input 
                  id="cardPassword"
                  :type="showPassword ? 'text' : 'password'" 
                  v-model="this.formData.pass"
                  required 
                  placeholder="请输入6位数字密码"
                  maxlength="6"
                />
                <button type="button" @click="showPassword = !showPassword" class="toggle-password">
                  <span v-if="showPassword">🙈</span>
                  <span v-else>👁️</span>
                </button>
              </div>
            </div>
            
            <button @click="reportLoss" class="confirm-btn">
              确认挂失
            </button>
          </div>

        </div>
      </div>
      
      <!-- Info Column -->
      <div class="info-column">
        <div class="info-card">
          <h4 class="card-title"><span class="icon">💡</span> 温馨提示</h4>
          <ul>
            <li>挂失后卡片将立即冻结，无法进行任何交易。</li>
            <li>请尽快到银行网点办理补卡手续。</li>
            <li>挂失期间请妥善保管个人信息。</li>
            <li>如需解除挂失，请携带身份证到网点办理。</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Confirm Modal -->
    <div v-if="showConfirmModal" class="confirm-modal">
      <div class="confirm-content">
        <div class="confirm-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="m16 10-4 4-4-4"/><path d="m12 14 V 4"/></svg>
        </div>
        <h3>确认挂失</h3>
        <p>您确定要对银行卡进行挂失操作吗？</p>
        <div class="confirm-details">
          <div class="detail-item">
            <span class="label">卡号</span>
            <span class="value">{{this.formData.cardID}}</span>
          </div>
        </div>
        <div class="confirm-actions">
          <button @click="confirmLoss" class="confirm-btn">确认挂失</button>
          <button @click="cancelLoss" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>

    <!-- Success Modal -->
    <div v-if="showSuccessModal" class="success-modal">
      <div class="success-content">
        <div class="success-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="m16 10-4 4-4-4"/><path d="m12 14 V 4"/></svg>
        </div>
        <h3>挂失成功</h3>
        <p>您的银行卡已成功挂失</p>
        <div class="success-details">
          <div class="detail-item">
            <span class="label">挂失时间</span>
            <span class="value">{{ successTime }}</span>
          </div>
          <div class="detail-item">
            <span class="label">挂失编号</span>
            <span class="value">{{ successId }}</span>
          </div>
        </div>
        <p class="success-note">请尽快到银行网点办理补卡手续</p>
        <button @click="closeSuccess" class="close-btn">完成</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'CardManagement',
  props: {
    userInfo: {
      type: Object,
      required: true
    },
    userCards: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      formData: {
        cardID: "",
        pass: ""
      },
      lossReason: '',
      lossDescription: '',
      contactPhone: '',
      phoneError: '',
      showConfirmModal: false,
      showSuccessModal: false,
      showRecords: false,
      successTime: '',
      successId: '',
      selectedCard: '',
      showPassword: false,
      cardPassword: ''
    }
  },
  computed: {
    isValidReport() {
      return this.lossReason && this.contactPhone && !this.phoneError && this.cardPassword.length === 6
    },
    currentCard() {
      return this.userCards.find(card => card.cardNumber === this.selectedCard)
    }
  },
  mounted() {
    if (!this.selectedCard && this.userCards.length > 0) {
      this.selectedCard = this.userCards[0].cardNumber
    }
  },
  methods: {
    formatCardNumber(cardNumber) {
      if (!cardNumber) return ''
      return cardNumber.replace(/(\d{4})(?=\d)/g, '$1 ')
    },
    validatePhone() {
      const phone = this.contactPhone.replace(/\s/g, '')
      if (!this.contactPhone) {
        this.phoneError = ''
        return
      }
      if (!/^1[3-9]\d{9}$/.test(phone)) {
        this.phoneError = '请输入正确的手机号码'
      } else {
        this.phoneError = ''
      }
    },
    getLossReasonName(reason) {

    },
    getState() {
      if (this.formData.cardID) {
        const data = this.userCards.find(card => card.cardID === this.formData.cardID)
        if(data.isReportLoss === '1') {
          return '已挂失'
        }else {
          return '正常'
        }
      }else {
        return '未选择银行卡'
      }
    },
    toggleRecords() {
      this.showRecords = !this.showRecords
    },
    reportLoss() {
      console.log(this.formData)

      this.showConfirmModal = true
    },
    confirmLoss() {
      console.log(this.formData)
      axios.post(
          'http://localhost:8057/card/handleLoss', this.formData
      ).then(res => {
        if (res.data.code === 200) {
          console.log(res.data.msg)
          this.transactionTime = new Date().toLocaleString('zh-CN');
          this.lastDepositedAmount = parseFloat(this.depositAmount);

          this.$emit('update-balance', parseFloat(this.depositAmount));

        }else {
          console.log(res.data.msg)
          alert(res.data.msg)
        }
      })
      this.showConfirmModal = false
    },
    cancelLoss() {
      this.showConfirmModal = false
    },
    closeSuccess() {
      this.showSuccessModal = false
      this.resetForm()
    },
    resetForm() {
      this.lossReason = ''
      this.lossDescription = ''
      this.contactPhone = ''
      this.phoneError = ''
      this.cardPassword = ''
      this.showPassword = false
    }
  }
}
</script>

<style scoped>
.card-management-container {
  max-width: 960px;
  margin: 24px auto;
  padding: 0 16px;
  animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-header {
  text-align: left;
  margin-bottom: 24px;
}
.page-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #0d6efd;
}
.page-header p {
  font-size: 14px;
  color: #5a6e78;
}

.card-status-section {
  margin-bottom: 24px;
}
.status-card-true {
  background: linear-gradient(135deg, #0d6efd, #0b5ed7);
  color: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(13, 110, 253, 0.15);
}
.status-card-false {
  background: orangered;
  color: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(13, 110, 253, 0.15);
}
.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.status-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}
.status-badge.normal {
  background: rgba(255, 255, 255, 0.2);
}
.status-badge.lost {
  background: rgba(220, 53, 69, 0.8);
}
.card-number {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  opacity: 0.9;
}

.management-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: flex-start;
}

.management-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  border: 1px solid #e9ecef;
  border-top: 4px solid #0d6efd;
  margin-bottom: 24px;
}

.management-card .card-title {
  color: #0d6efd;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #343a40;
}

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 14px;
  background-color: #fff;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}
textarea {
  resize: vertical;
  min-height: 70px;
}

.password-input {
  position: relative;
}
.password-input input {
  padding-right: 40px;
}
.toggle-password {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-message {
  color: #dc3545;
  font-size: 12px;
  margin-top: 4px;
}

.unlock-section {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}
.unlock-info h4 {
  color: #0d6efd;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px 0;
}
.unlock-info p {
  color: #6c757d;
  font-size: 14px;
  margin: 0 0 20px 0;
}
.contact-info {
  display: grid;
  gap: 12px;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}
.contact-item .icon {
  font-size: 20px;
  color: #0d6efd;
}
.contact-details h5 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: #343a40;
}
.contact-details p {
  margin: 0;
  font-size: 13px;
  color: #6c757d;
}

.confirm-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  background-color: #dc3545;
  color: white;
  transition: background-color 0.2s;
}
.confirm-btn:hover:not(:disabled) {
  background-color: #c82333;
}
.confirm-btn:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
  opacity: 0.65;
}

.records-card {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  overflow: hidden;
}
.records-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: #f8f9fa;
  cursor: pointer;
  transition: background-color 0.2s;
}
.records-header:hover {
  background: #e9ecef;
}
.records-header .card-title {
  color: #343a40;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.toggle-icon {
  font-size: 12px;
  color: #6c757d;
  transition: transform 0.2s;
}
.toggle-icon.expanded {
  transform: rotate(180deg);
}
.records-content {
  padding: 0 24px 24px 24px;
}
.record-item {
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
  transition: box-shadow 0.2s;
}
.record-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.record-type {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}
.record-type.loss {
  background: #f8d7da;
  color: #721c24;
}
.record-type.unlock {
  background: #d1ecf1;
  color: #0c5460;
}
.record-time {
  color: #6c757d;
  font-size: 12px;
}
.record-content p {
  margin: 4px 0;
  color: #343a40;
  font-size: 13px;
}
.record-reason {
  font-weight: 500;
}
.record-description {
  color: #6c757d;
}

.info-column .info-card {
  background: #f0f7ff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #cce3ff;
}
.info-card h4.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #0d6efd;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
}
.info-card .icon {
  margin-right: 8px;
}
.info-card ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: #5a6e78;
}
.info-card li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 12px;
}
.info-card li:last-child {
  margin-bottom: 0;
}
.info-card li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #0d6efd;
  font-weight: bold;
}

/* Confirm Modal */
.confirm-modal {
  position: fixed;
  inset: 0;
  background-color: rgba(17, 24, 39, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s;
}
.confirm-content {
  background-color: white;
  border-radius: 8px;
  padding: 32px;
  width: 90%;
  max-width: 420px;
  text-align: center;
  animation: modal-pop 0.3s ease-out forwards;
}
@keyframes modal-pop {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

.confirm-icon {
  color: #dc3545;
  margin-bottom: 16px;
}
.confirm-content h3 {
  font-size: 20px;
  font-weight: 500;
  color: #343a40;
  margin: 0 0 8px 0;
}
.confirm-content p {
  font-size: 14px;
  color: #6c757d;
  margin: 0 0 20px 0;
}
.confirm-details {
  border-top: 1px solid #e9ecef;
  margin: 20px 0;
  padding-top: 20px;
}
.detail-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
}
.detail-item .label { color: #6c757d; }
.detail-item .value { color: #343a40; font-weight: 500; }

.confirm-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.confirm-actions .confirm-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid #dc3545;
  border-radius: 6px;
  background-color: #dc3545;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.confirm-actions .confirm-btn:hover {
  background-color: #c82333;
  border-color: #bd2130;
}
.confirm-actions .cancel-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid #6c757d;
  border-radius: 6px;
  background-color: #6c757d;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.confirm-actions .cancel-btn:hover {
  background-color: #5a6268;
  border-color: #545b62;
}

/* Success Modal */
.success-modal {
  position: fixed;
  inset: 0;
  background-color: rgba(17, 24, 39, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s;
}
.success-content {
  background-color: white;
  border-radius: 8px;
  padding: 32px;
  width: 90%;
  max-width: 420px;
  text-align: center;
  animation: modal-pop 0.3s ease-out forwards;
}

.success-icon {
  color: #198754;
  margin-bottom: 16px;
}
.success-content h3 {
  font-size: 20px;
  font-weight: 500;
  color: #343a40;
  margin: 0 0 8px 0;
}
.success-content p {
  font-size: 14px;
  color: #6c757d;
  margin: 0 0 20px 0;
}
.success-note {
  font-size: 13px;
  color: #dc3545;
  font-weight: 500;
  margin: 16px 0 24px 0;
}

.close-btn {
  width: 100%;
  padding: 10px;
  border: 1px solid #0d6efd;
  border-radius: 6px;
  background-color: #0d6efd;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.close-btn:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

@media (max-width: 768px) {
  .management-layout {
    grid-template-columns: 1fr;
  }
  .info-column {
    order: -1; /* Move info column to top on mobile */
  }
  .confirm-actions {
    flex-direction: column;
  }
  .contact-info {
    grid-template-columns: 1fr;
  }
}
</style> 